<template>
  <div class="tabControl">
    <!-- 默认选项卡 -->
    <section
      v-if="!datas.optionList || !datas.optionList[0]"
      class="defaultNavigation"
      :class="[
        datas.commodityType === 0 ? 'defaultNavigation0' : '',
        datas.commodityType === 1 ? 'defaultNavigation1' : '',
      ]"
      :style="{ background: datas.backgroundColor, display: datas.textStyle === 0 ? 'flex' : '-webkit-box', 'overflow-x': datas.textStyle === 0 ? '' : 'scroll' }">
      <!-- 导航 -->
      <div
        v-for="index in 5"
        :key="index"
        class="navigationList"
        :style="{ width: datas.textStyle === 0 ? 'auto' : 375 / datas.showSize - 1 + 'px' }">
        <!-- 文字 -->
        <p :class="{active: isActive === index}" @click="changeClass(index)"> 选项卡 </p>
      </div>
    </section>

    <!-- 导航列表 -->
    <section
      v-else
      class="defaultNavigation"
      :style="{
        background: datas.backgroundColor,
        display: datas.textStyle === 0 ? 'flex' : '-webkit-box',
        'flex-wrap': datas.textStyle === 0 ? 'wrap' : 'nowrap',
        'justify-content':
          datas.textStyle === 0 ? 'space-evenly' : 'space-around',
        'overflow-x': datas.textStyle === 0 ? '' : 'scroll',
      }">
      <!-- 导航 -->
      <div
        v-for="(item, index) in datas.optionList"
        :key="index"
        class="navigationList"
        :style="{ width: datas.textStyle === 0 ? '25%' : 375 / datas.showSize - 1 + 'px'}">
        <p :class="{ active: isActive === index }" @click="changeClass(index)"> {{ item.name }} </p>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'tabControl',
  props: {
    datas: Object
  },
  data() {
    return {
      isActive: 0
    }
  },
  created() {
    console.log(this.datas, '--------tabControl')
  },
  methods: {
    changeClass(i) {
      this.isActive = i
    }
  }
}
</script>

<style scoped lang="scss">
.tabControl {
  position: relative;
  .defaultNavigation {
    // overflow-x: scroll;
    justify-content: space-evenly;
    &::-webkit-scrollbar {
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #00a0e9;
    }
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      border-bottom: 0 !important;
    }
    /* 导航 */
    &.defaultNavigation0 {
      .navigationList {
        display: flex;
        // flex-direction: column;
        align-items: center;
        p {
          font-size: 16px;
          // margin-top: 5px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          box-sizing: border-box;
          color: rgba(255, 255, 255, 0.6);
        }
        .active{
          color: #fff;
          font-weight: 600;
          font-size: 26px;
          // border-bottom: 2px solid #53C856;
          // padding-bottom:6px;
        }
      }
    }
    &.defaultNavigation1 {
      .navigationList {
        display: flex;
        align-items: center;
        p {
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          box-sizing: border-box;
          color: #fff;
          background: #122766;
          width: 140px;
          height: 40px;
          border-radius: 30px;
          line-height: 40px;
        }
        .active{
          color: #fff;
          font-weight: 600;
          font-size: 26px;
          width: 160px;
          height: 48px;
          line-height: 48px;
          background: #4797F5;
        }
      }
    }
  }
}
</style>
